@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,300&display=swap');
*{
    margin: 0;
    padding: 0;
}
.mainheader {
    width: 500px;
    text-align: center;
    margin: 30px auto;
    font-size: 3rem;
    font-family: 'Caveat', cursive;
    font-weight: bold;
}

.vertical-scroll::-webkit-scrollbar {
    width: 1em;
    height: 1em;
}

.vertical-scroll::-webkit-scrollbar-track {
    background: rgb(222, 82, 219);
    border-radius: 100vw;
    margin-block: 0.5em;
}

.vertical-scroll::-webkit-scrollbar-thumb {
    background: rgb(255, 255, 255);
    border: 0.25em solid rgb(222, 82, 219);
    border-radius: 100vw;
}

.vertical-scroll {
    display: grid;
    gap: 0.5em;
    height:400px;
    grid-auto-flow: row;
    grid-auto-columns: 100%;
    padding: 0.5em;
    overflow-y: scroll;
    background: #efb9ec;
    border-radius: 1em;
    position: relative;
    width: 50vw;
    margin: auto;
}

.vertical-scroll>div {
    background: hsl(0 0% 90%);
    border-radius: 1em;
    border: 0.5em solid rgb(159, 175, 240);
    padding: 1em;
    font-family: 'Roboto', sans-serif;
}